import Vue from 'vue'
import { throttle } from './index'
import store from '@/store'
/**
 * loadMore Function  
 * finished Boolen
 * loading  Boolen 是否在加载中
 */
let SELECTWRAP_DOM
let li
Vue.directive('loadMore', {
    bind(el, binding) {
        const _el = binding.value
        // 获取element-ui定义好的scroll盒子
        SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.onscroll = throttle(function () {
            const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (CONDITION) {
                _el.loadMore()
            }
        }, 10)
        li = document.createElement('p')
        li.className = 'select_loading'
        SELECTWRAP_DOM.appendChild(li)
    },
    update(el, binding) {
        if (!binding.value.loading && binding.value.finished) {
            li.innerHTML = '没有更多了...'
        } else {
            li.innerHTML = '加载中...'
        }
        if (binding.value.finished) {
            SELECTWRAP_DOM.onscroll = null
        }
    },
    unbind() {
        SELECTWRAP_DOM.onscroll = null
    }
})

/**
 * action 权限名称  
 * effect 操作  disabled/delete
 */
const permissions = store.state.userInfo.permissions || []
Vue.directive('permission', {
    inserted(el, binding) {
        const action = binding.value.action
        const effect = binding.value.effect
        if (permissions.indexOf(action) === -1) {
            if (effect === 'disabled') {
                el.disabled = true
                el.classList.add('is-disabled')
            } else {
                el.parentNode.removeChild(el)
            }
        }
    }
})
